<style>

	#pick_target { width: 240px; }
	#pick_days { width: 30px; }
	
	#chart { width: 100%; height: 60vw; }
	.chart_conditions2 .lines { width: 50vw; margin-left: : 10px; }
	.chart_conditions2 button { width: 8vw; height: 8vw; }
	
	.table_conditions button { width: 60px; margin: 0 10px; }
	
	#kktable { font-size: 8px; }
	#kktable th, #kktable td { padding: 0; }
	#kktable select, #kktable input { width: 40px; }
</style>
<div id="container">
	<div class="mui-bar mui-bar-nav">
		<a class="mui-icon mui-icon-left-nav mui-pull-left" id="return"></a>
		<h1 class="mui-title">体验课预约</h1>
	</div>
	<div class="mui-content" id="vm">
		<h4>预约及体验课预约情况统计图</h4>
		<div class="chart_conditions">
			<div class="lines">
				<div class="labels">统计对像：</div>
				<div class="inputs" id="pick_target" :target_type="target_type" >{{target_name}}</div>
			</div>
		</div>
		<div id="chart"><img src="image/spinner.gif" style="width: 50%; margin:auto;" /></div>

		<hr>
		<div class="whitespace"></div>
		<h4>预约及体验课预约情况统计表</h4>
		<div class="table_conditions">
			<div class="lines">
				<div class="labels">日期：</div>
				<div class="inputs" :v-model="table_date" id="table_date" >{{table_date}}</div>
				<div class="labels" v-if="showTableTargetType">类目：</div>
				<div class="inputs" :v-model="table_target_type" id="table_target_type" v-if="showTableTargetType">{{table_target_type_name}}</div>
			</div>
		</div>
		<button v-if="showReturn" @click="returnTable">后退</button>
		<v-table style="width:100%" :height="400" is-horizontal-resize :is-loading="isLoading" :columns="columns" :table-data="tableData" row-hover-color="#fff" :row-click="rowClick" :multiple-sort="multipleSort" sort-always  @sort-change="sortChange"></v-table>
		</div>
	</div>	

<script>

	
	var vm = new Vue({
		el: "#vm",
		data: {
			target_type: 'region',							// 统计对像范围值 
			target_name: '',								// 统计对像范围显示名
			table_date: rd.getDateStr(new Date(), -1), 		// 统计表日期
			table_target_type: 'city',						// 统计表对像值
			table_target_type_name: '城市',					// 统计表对像显示名
			target_name_t: null,							// 统计表对像下钻后新范围值
			table_target_type_t: '',						// 统计表对像下钻后新值。 由city向name变化，或者由name向memo变化
			tableData: [],
			columns: [
				{field: "target", title: "城市", width: 100, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "day", title: "日期", width: 85, titleAlign: 'center', columnAlign:'center', orderBy:'',  isResize:true},
				{field: "pre", title: "预约总人数", width: 60, titleAlign: 'center', columnAlign:'center', orderBy:'', isResize:true},
				{field: "ty_pre", title: "预约体验课人数", width: 60, titleAlign: 'center', columnAlign:'center', orderBy:'', isResize:true},
				// {field: "ty_pre_classes", title: "体验课上课人数", width: 60, titleAlign: 'center', columnAlign:'center', orderBy:'', isResize:true},
			],
			showTableTargetType: true,
			showReturn: false,
			isLoading: true,
			multipleSort: false,

		},
		methods: {
			rowClick: function(rowIndex, rowData, columnInfo){ // 表下钻
				// console.log(rowData['target']);
				if(columnInfo.field != 'target' || vm.table_target_type_t == 'memo') return;
				vm.target_name_t = rowData['target'];
				if (!vm.table_target_type_t) vm.table_target_type_t = vm.table_target_type;
				if (vm.table_target_type_t == 'city'){
					vm.table_target_type_t = 'name';
					vm.columns[0].title = '门店';
				}else if(vm.table_target_type_t == 'name'){
					vm.table_target_type_t = 'memo'
					vm.columns[1].title = '时间';
				}
				vm.showReturn = true;
				drawTable()
			},
			returnTable: function(){
				vm.table_target_type_t = null;
				vm.target_name_t = null;
				vm.columns[0].title = "城市";
				vm.columns[1].title = "日期";
				vm.showReturn = false;
				drawTable()
			},
			sortChange: function(e){
				for(let i in e){
					if(e[i]){
						vm.tableData.sort(function(a, b){
							let n = 0;
							if(!isNaN(a[i])){
								n = Number(b[i]) - Number(a[i])
							}else{
								n = a[i] < b[i] ? 1 : a[i] == b[i] ? 0 : -1;
							}
							if(e[i] == "asc"){
								n = -n;
							}
							return n;
						})
					}
				}
			}
		}
	})

	

	// 显示图
	var showChart = function(){
	
		var data = {
			do: 'ty_classes',
			target: vm.target_name
		};
		console.log(data)
		$.get(dataDomain + "gyms.php", data, function(r){
			console.log(r);
			let pre = [],
				pre_r = [],
				ty_pre = [],
				ty_pre_r = [],
				xaxisdata = [];
			for(var i in r){
				xaxisdata.push(r[i].days);
				pre.push(Number(r[i].pre));
				ty_pre.push(Number(r[i].ty_pre));
				if(i >= 30){
					pre_r.push(Number(r[i-30].pre));
					ty_pre_r.push(Number(r[i-30].ty_pre));
				}else{
					pre_r.push(0);
					ty_pre_r.push(0);
				}
	
			}
			
			var opt = rd.chart_option.createNew();
			opt.add_series([{name: "本月预约", type: "line"}, {name: "本月体验课预约", type: "bar"}, 
				{name: "上月预约", type: "line"}, {name: "上月体验课预约", type: "bar"}]);
			opt.option.xAxis[0].name = "日期";
			opt.option.yAxis[0].name = "人次";
			opt.option.dataZoom[0].startValue = i - 10;
			opt.date_format();
			opt.option.xAxis[0].data = xaxisdata;
			opt.option.series[0].data = pre;
			opt.option.series[1].data = ty_pre;
			opt.option.series[2].data = pre_r;
			opt.option.series[3].data = ty_pre_r;		

			var chart = echarts.init(document.getElementById("chart"));
			chart.setOption(opt.option);		
		}, 'json')
	}
	
	// 定义table
	var drawTable = function(){
		// 加载表
		let regs = {
			do: 'ty_classes_table',
			day: vm.table_date,
			target: vm.target_name_t ? vm.target_name_t : vm.target_name,
			count_type: vm.table_target_type_t ? vm.table_target_type_t : vm.table_target_type
		}
		console.log(regs)
		vm.isLoading = true;
		$.get(dataDomain + "gyms.php", regs, function(r){
			console.log(r);
			vm.isLoading = false;

			vm.tableData = r;
			
		}, 'json')
	
	}
	

	// 表对象模式选择器
	var target_picker = new mui.PopPicker();
	target_picker.setData([{text:'城市', value: 'city'}, {text: '门店', value: 'name'}]);
	
	$("#table_target_type").on('tap', function(e){
		if(vm.target_type != 'region') return;  // 全国，大区级筛选项下，才需要选择。 城市筛选项下，只能是门店。 门店筛选项下，不显示该选择器
		var self = $(this);
		target_picker.show(function(items){
			vm.columns[0].title = items[0].text; // 更改表头第一项，与当前选项一致
			vm.table_target_type_name = items[0].text;
			vm.table_target_type = items[0].value;
		})
	})

	// 表日期选择器
	var date_picker = new mui.DtPicker({type: 'date'});
	$("#table_date").on('tap', function(e){
		date_picker.show(function(items){
			console.log(items)
			vm.table_date = items.text;
		})
	})

	
	// 返回首页按钮监听
	$("#return").on("tap", function(){
		rd.navito("pages", "homepage");
	})

	// Vue值变化监听
	vm.$watch('target_name', function(){ // 监听范围选择器
		vm.target_name_t = null;
		vm.table_target_type_t = null;
		vm.columns[0].title = "城市";
		vm.columns[1].title = "日期";
		vm.showReturn = false;
		showChart();
		drawTable();
	});
	vm.$watch("target_type", function(){ // 监听数据范围层级变化
		if(vm.target_type == 'region'){
			vm.showTableTargetType = true;
			vm.table_target_type_name = "城市";
			vm.table_target_type = "city";
		}else if(vm.target_type == 'city'){
			vm.showTableTargetType = false;
			vm.table_target_type_name = "门店";
			vm.table_target_type = "name";
		}else{
			vm.showTableTargetType = false;
		}
	})
	vm.$watch('table_target_type', function(){ // 监听数据类别选择器
		vm.table_target_type_t = null;
		drawTable();
	})
	vm.$watch('table_date', function(){ // 监听日期选择器
		drawTable();
	})

	vm.target_name = "全国"; // 数据范围初始化
	picker_choose_gym(); // 数据范围选择器三级联选定义（打包）


</script>